<template>
  <div class="test2" style="width:600px;height:400px;">
    <div id="myChart3" style="width:100%;height:500px;float:left;"></div>
  </div>
</template>

<script>
export default {
  name: 'test2',
  data () {
    return {
      myChart3: '',
      opinion3: ['出勤人数', '缺勤人数'],
      opinionData3: [
        { value: 13, name: '缺勤人数', itemStyle: 'red' },
        { value: 19, name: '出勤人数', itemStyle: '#1ab394' }
      ]
    }
  },
  mounted: function () {
    this.drawLine2()
  },
  methods: {
    drawLine2 () {
      // console.log("开始画饼图")
      // 基于准备好的dom，初始化echarts实例
      this.myChart3 = this.$echarts.init(document.getElementById('myChart3'))
      // 绘制图表
      this.myChart3.setOption({
        title: {
          text: '班级总体出勤情况', // 主标题
          subtext: '', // 副标题
          x: 'left' // x轴方向对齐方式
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',

          bottom: 'bottom',
          data: this.opinion3
        },
        series: [
          {
            name: '出勤数据',
            type: 'pie',
            radius: '50%',
            center: ['50%', '50%'],
            data: this.opinionData3,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              },
              color: function (params) {
                // 自定义颜色
                var colorList = ['red', '#1ab394']
                return colorList[params.dataIndex]
              }
            }
          }
        ]
      })
    }
  }
}
</script>


<style scoped>

</style>
